<template>
    <div class="sportContainer">
        <div class="chooseContainer">
            <div class="sportToday" v-if="!todayShow" @click="todayClickShow"></div>
            <div class="clickSportToday" v-if="todayShow"></div>
            <div class="sportKnowledge" v-if="!knowledgeShow" @click="knowledgeClickShow"></div>
            <div class="clickSportKnowledge" v-if="knowledgeShow"></div>
            <div class="sportCourse" v-if="!courseShow" @click="courseClickShow"></div>
            <div class="clickSportCourse" v-if="courseShow"></div>
        </div>
        <keep-alive include="sportToday">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
    export default {
        name:'mySport',
        data(){
            return{
                todayShow:false,
                knowledgeShow:true,
                courseShow:false
            }
        },
        methods:{
            todayClickShow(){
                if(this.todayShow===false){
                    this.$router.replace({
                        name:'sportToday'
                    })
                }
                this.todayShow=true
                this.knowledgeShow=false
                this.courseShow=false
            },
            knowledgeClickShow(){
                if(this.knowledgeShow===false){
                    this.$router.replace({
                        name:'sportKnowledge'
                    })
                }
                this.todayShow=false
                this.knowledgeShow=true
                this.courseShow=false
            },
            courseClickShow(){
                if(this.courseShow===false){
                    this.$router.replace({
                        name:'sportCourse'
                    })
                }
                this.todayShow=false
                this.knowledgeShow=false
                this.courseShow=true
            }
        }
    }
</script>

<style scoped>
    .sportContainer{
        width: 100%;
        margin-top: .1rem;
    }
    .chooseContainer{
        margin-left: 0.32rem;
        width: 76%;
        display: flex;
        justify-content: space-between;
    }
    .chooseContainer div{
        width: 1.78rem;
        height: 0.72rem;
        background-position: center;
        background-size: contain;
        border-radius: 0.72rem;
    }
    .sportToday{
        background-image: url(../assets/img/1-icon@2x/1-16sportToday.png);
    }
    .sportKnowledge{
        background-image: url(../assets/img/1-icon@2x/1-18sportKnowledge.png);
    }
    .sportCourse{
        background-image: url(../assets/img/1-icon@2x/1-20sportCourse.png);
    }
    .clickSportToday{
        background-image: url(../assets/img/1-icon@2x/1-17clickSportToday.png);
    }
    .clickSportKnowledge{
        background-image: url(../assets/img/1-icon@2x/1-19clickSportKnowledge.png);
    }
    .clickSportCourse{
        background-image: url(../assets/img/1-icon@2x/1-21clickSportCourse.png);
    }
</style>